<template>
    <view>
        <!-- 推荐歌单 -->
        <view :class="classNameComp">
            <view class="tit-bar">
                {{ title }}
                <navigator :url="link" open-type="redirect" class="more fr">
                    {{ linkTitle }}
                </navigator>
            </view>
            <scroll-view class="scroll-view" scroll-x>
                <view class="item" v-for="(item, index) in list" :key="index" @click="gotoUrl(item)">
                    <image class="img" :src="item.picUrl"></image>
                    <view class="desc ellipsis">
                        {{ item.name }}
                    </view>
                    <view class="count">
                        {{ item.playCount | plays }}
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
export default {
    props: ['title', 'link', 'linkTitle', 'list', 'className'],
    filters: {
        plays(play) {
            play = parseInt((play / 10000));
            return play + '万';
        }
    },
    computed: {
        classNameComp() {
            if (this.className === true) {
                return 'song-list-comp'
            } else if (this.className === false) {
                return 'song-list'
            } else {
                return null
            }
        }
    },
    methods: {
        gotoUrl(item) {
            uni.navigateTo({
                url: '/pages/subpages/album/album?id=' + item.id
            })
            console.log(1);
        }
    }
}
</script>
<style lang="scss">
.song-list {
    padding-left: 32rpx;

    .tit-bar {
        font-size: 34rpx;
        font-weight: 600;
        line-height: 110rpx;
    }

    .more {
        width: 150rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        margin-top: 30rpx;
        margin-right: 32rpx;
        color: #333;
        font-weight: 400;
        font-size: 24rpx;
        border: 2rpx solid #e6e6e6;
        border-radius: 50rpx;
    }

    .switch-line {
        justify-content: space-between;
        color: #999;

        .flex-box {
            line-height: 110rpx;
            width: 300rpx;
        }

        .switch-item {
            font-weight: 600;

            &:first-child {
                width: 80rpx;
            }

            &:last-child {
                padding-left: 22rpx;
            }

            &.on {
                color: #333;
                font-size: 34rpx;
            }
        }
    }

    .scroll-view {
        width: 100%;
        white-space: nowrap;
    }

    .item {
        position: relative;
        display: inline-block;
        width: 218rpx;
        padding-bottom: 16rpx;
        margin-right: 16rpx;
        line-height: 34rpx;

        &:before {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 40rpx;
            z-index: 2;
            background-image: linear-gradient(180deg, rgba(0, 0, 0, .2), transparent);
        }

        &.video {
            width: 450rpx;
        }

        .img {
            display: block;
            width: 100%;
            height: 218rpx;
            margin-bottom: 16rpx;
            background: #eee;
            border-radius: 10rpx;
        }
    }

    .count {
        position: absolute;
        top: 0;
        right: 0;
        padding-left: 25rpx;
        line-height: 34rpx;
        color: #fff;
        font-size: 24rpx;
        z-index: 10;
        background: url() no-repeat;
        background-size: 25rpx 25rpx;
        transform: scale(0.8);
    }
}

.song-list-comp {
    padding-left: 32rpx;
    margin-top: 10rpx;

    .tit-bar {
        font-size: 34rpx;
        font-weight: 600;
        line-height: 110rpx;
    }

    .more {
        width: 150rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        margin-top: 30rpx;
        margin-right: 32rpx;
        font-weight: 400;
        font-size: 24rpx;
        border: 2rpx solid #e6e6e6;
        border-radius: 50rpx;
    }

    .item {
        float: left;
        position: relative;
        width: 216rpx;
        padding-bottom: 16rpx;
        margin-right: 16rpx;
        line-height: 34rpx;

        &.video {
            width: 450rpx;
        }

        .img {
            display: block;
            width: 100%;
            height: 216rpx;
            margin-bottom: 16rpx;
            background: #eee;
            border-radius: 10rpx;
        }

        .desc {
            height: 64rpx;
            margin-top: 12rpx;
            line-height: 30rpx;
            overflow: hidden;
        }

        .count {
            position: absolute;
            top: 0;
            right: 0;
            padding-left: 25rpx;
            line-height: 34rpx;
            color: #fff;
            font-size: 24rpx;
            z-index: 10;
            background: url() no-repeat;
            background-size: 25rpx 25rpx;
            transform: scale(0.8);
        }
    }
}
</style>